﻿

专业列表页
@*添加按钮*@
<div>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addDep">添加 </button>
</div>
<table id="depTable" class="table">
    <thead>
        <tr>

        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

@*添加对话框*@
<div class="modal fade" id="addDep" tabindex="-1" data-bs-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">添加专业部门</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="recipient-name" class="col-form-label">部门名称:</label>
                        <input type="text" class="form-control" id="depName">
                        <label for="recipient-name" class="col-form-label">部门代码:</label>
                        <input type="text" class="form-control" id="depCode">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="submitAdd">保存</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

@*编辑对话框*@
<div class="modal fade" id="editDep" tabindex="-1" data-bs-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">编辑部门</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="recipient-name" class="col-form-label">部门id:</label>
                        <input type="text" class="form-control" id="newDepId">
                    </div>
                    <div class="mb-3">
                        <label for="recipient-name" class="col-form-label">部门名称:</label>
                        <input type="text" class="form-control" id="newDepName">
                    </div>
                    <div class="mb-3">
                        <label for="recipient-name" class="col-form-label">部门代码:</label>
                        <input type="text" class="form-control" id="newDepCode">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="submitEdit">保存</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

@*确定删除对话框*@
<div class="modal fade" id="sureDep" tabindex="-1" data-bs-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">删除部门</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>确认删除吗?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="submitDel">确定</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>


@section Scripts{
    <script>
        loadpage()
        let g_rows
        function loadpage() {
            let s = sessionStorage.getItem('deplist')
            if (s == [] || s == "" || s == null) {
                $.ajax({
                    url: '/Department/GetDepList',
                    type: 'get',
                    success: function (data) {
                        parseData(data)
                    },
                    error: function (err) {
                    }
                })
            } else {
                parseStorage(s)
            }
        }
        //解析请求数据并渲染到页面
        function parseData(data) {
            $('#depTable thead tr').empty()
            $('#depTable tbody tr').empty()
            let jsd = JSON.stringify(data)

            let head = JSON.parse(data.attr)
            head.push('操作')
            sessionStorage.setItem('deplist_head', JSON.stringify(head))

            //渲染表头
            for (index in head) {
                $('#depTable thead tr').append('<th>' + head[index] + '</th>')
            }

            let rows = JSON.parse(data.row)
            g_rows = rows
            sessionStorage.setItem('deplist', JSON.stringify(rows))

            //渲染表格
            $(rows).each(function (index, ele) {
                $('#depTable tbody').append('<tr></tr>')
                for (key in ele) {
                    $('#depTable tbody tr:last').append('<td>' + ele[key] + '</>')
                }
                $('#depTable tbody tr:last').append('<td>' +
                    '<button class="detailBtn" onclick="details(this)" data-bs-toggle="modal" data-bs-target="#detailDep">查看详情</button>' +
                    '</td>')

                $('#depTable tbody tr:last').append('<td>' +
                    '<button class="editBtn" onclick="edit(this)" data-bs-toggle="modal" data-bs-target="#editDep">编辑</button>' +
                    '<button class="delBtn" onclick="del(this)" data-bs-toggle="modal" data-bs-target="#sureDep">删除</button>' +
                    '</td>')
                $('#depTable tbody tr td:last').attr({ 'depId': ele.DepartmentId })
            })
            $('.detailBtn').addClass("btn btn-primary btn-sm")
            $('.delBtn').addClass("btn btn-danger btn-sm")
            $('.editBtn').addClass("btn btn-primary btn-sm")
        }



        //解析缓存并加载到表格
        function parseStorage(data) {
            $('#depTable thead tr').empty()
            $('#depTable tbody tr').empty()
            let headStorage = sessionStorage.getItem('deplist_head')
            let head = JSON.parse(headStorage)
            //渲染表头
            for (index in head) {
                $('#depTable thead tr').append('<th>' + head[index] + '</th>')
            }

            //渲染表格
            let rows = JSON.parse(data)
            $(rows).each(function (index, ele) {
                $('#depTable tbody').append('<tr></tr>')
                for (key in ele) {
                    $('#depTable tbody tr:last').append('<td>' + ele[key] + '</>')
                }
                $('#depTable tbody tr:last').append('<td>' +
                    '<button class="detailBtn" onclick="details(this)" data-bs-toggle="modal" data-bs-target="#detailDep">查看详情</button>' +
                    '</td>')
                $('#depTable tbody tr:last').append('<td>' +
                    '<button class="editBtn" data-bs-toggle="modal" data-bs-target="#editDep">编辑</button>' +
                    '<button class="delBtn" data-bs-toggle="modal" data-bs-target="#sureDep">删除</button>' +
                    '</td>')

            })
            $('.detailBtn').addClass("btn btn-primary btn-sm")
            $('.delBtn').addClass("btn btn-danger btn-sm")
            $('.editBtn').addClass("btn btn-primary btn-sm")
        }


        //刷新数据
        function refreshData() {
            $('#depTable thead tr').empty()
            $('#depTable tbody tr').empty()
            $.ajax({
                url: '/Department/GetDepList',
                type: 'get',
                success: function (data) {
                    parseData(data)
                },
                error: function (err) {
                }
            })
        }


        //添加对话框“保存”按钮响应事件
        $('#submitAdd').click(function () {

            if ($('#depName').val() == '' || $('#depName').val() == null || $('#depCode').val() == '' || $('#depCode').val() == null)
                return

            $.ajax({
                url: '/Department/AddDep',
                type: "post",
                data: {
                    DepName: $('#depName').val(),
                    DepCode: $('#depCode').val()
                },
                dataType: 'json',
                success: function (data) {
                    if (data == 0 || data == '0') {
                        alert("部门名称或部门代码已存在")
                        return
                    }
                    if (data == -1 || data == '-') {
                        alert("部门名称或部门代码不能为空")
                        return
                    }
                    if (data == 1 || data == '1') {
                        refreshData()
                    }
                }
            })
        })


        //第一次加载页面--“编辑”按钮响应事件
        function edit(e) {
            let depId = $(e).parent().attr('depId')
            let dep = g_rows.filter(function (d) {
                return d.DepartmentId == depId
            })
            $('#newDepId').val(dep[0].DepartmentId)
            $('#newDepId').attr({ 'disabled': 'disabled' })
            $('#newDepName').val(dep[0].DepName)
            $('#newDepCode').val(dep[0].DepCode)
        }

        //使用缓存--“编辑”按钮响应事件
        $('.editBtn').each(function (index) {
            $(this).click(function () {
                let rows = JSON.parse(sessionStorage.getItem('deplist'))
                let dep = rows.filter(function (r, ind) {
                    return index == ind
                })
                //console.log(role)
                $('#newDepId').val(dep[0].DepartmentId)
                $('#newDepId').attr({ 'disabled': 'disabled' })
                $('#newDepName').val(dep[0].DepName)
                $('#newDepCode').val(dep[0].DepCode)
            })
        })

        //编辑对话框中的“保存”按钮点击事件响应
        $('#submitEdit').click(function (index) {
            let depId = $('#newDepId').val()
            let depName = $('#newDepName').val()
            let depCode = $('#newDepCode').val()
            if (depName == '' || depName == null || depCode == "") {
                //提示名称不能为空

                return
            }

            $.ajax({
                url: '/Department/EditDep',
                type: 'post',
                data: {
                    DepartmentId: depId,
                    DepName: depName,
                    DepCode:depCode
                },
                success: function (data) {
                    if (data == 1) {
                        alert("修改成功")
                    }
                    else if (data == 0) {
                        alert('名称已存在!')
                    }else if(data==-1){
                        alert('名称或代码不能为空!')
                    }
                    //刷新表格
                    refreshData()
                    //关闭对话框
                    // ...
                },
                error: {

                }
            })
        })



        //第一次加载页面--"删除"按钮响应事件
        let depId
        function del(e) {
            depId = $(e).parent().attr('depid')
        }

        //缓存的数据--"删除"按钮点击事件响应
        $('.delBtn').each(function (index) {
            $(this).click(function () {
                let stor = sessionStorage.getItem('deplist')

                let rows = JSON.parse(stor)
                let tr = $(rows).filter(function (ind, ele) {
                    return ind == index
                })
                depId = tr[0].DepartmentId
            })
        })

        //"删除"对话框--"确定"按钮响应事件
        $('#submitDel').click(function () {
            let delId = depId;
            if (delId <= 0) {
                return
            }

            $.ajax({
                url: '/Department/DelDep',
                type: 'post',
                data: {
                    DepartmentId: delId
                },
                success: function (data) {
                    if (data == 1) {
                        alert("删除成功")
                    }
                    else {
                        alert('删除失败!')
                    }
                    //刷新表格
                    refreshData()
                    //关闭对话框
                    // ...
                },
                error: {

                }
            })
        })


    </script>
}